import React,{Component} from 'react';
import PropTypes from "prop-types";
import {StyleSheet,View,Image,TouchableOpacity} from 'react-native';
import Accordion from './Accordion.js';

import Label from '../label/index.js';

import color from '../../config/theme/standard/color.js';
import fontSize from '../../config/theme/standard/fonts.js';

export default class Collapse extends Component {
    constructor(props){
        super(props);

        this._renderHeader=this._renderHeader.bind(this);
        this._renderContent=this._renderContent.bind(this);
        this._toggle=this._toggle.bind(this);
        this._renderImg=this._renderImg.bind(this);
        this.spaceWhiteStyle=this.props.hasSpace?styles.space:null;

    }

    _renderImg(section, index, isActive){
        let icon = this.props.imageSource != '' ? (!isActive ? this.props.imageSource[0] : this.props.imageSource[1]) : (!isActive ? require('../../assets/icon_collapse_arrow_up.png') : require('../../assets/icon_collapse_arrow_down.png'));

        let imgComponent;
        let style = this.props.imgPos == "center" ? true : false;
        if(this.props.hasImg){
            if(this.props.imgPos == 'center'){
                imgComponent = <Image style={[styles.headerImage,{marginTop: 0}, this.props.imageStyle]} source={icon}/>
            }
        }

        let textComponent;
        if (this.props.text) {
            if(this.props.imgPos == 'center'){
                textComponent = <Label text={!isActive ? this.props.text[0] : this.props.text[1]} labelStyle={[{color:color.collapse.checkMore, fontSize:fontSize.collapse.checkMoreFontSize, //paddingRight: 8
                }, this.props.textStyle]}/>
            }
        }

        return (
            <View style={[this.spaceWhiteStyle, {paddingRight: 0, paddingLeft: 0}]}>
                <View style={style ? styles.headerColImg : null}>
                    {textComponent}
                    {imgComponent}
                </View>
            </View>
        );
    }

    _renderHeader(section,index,isActive) {
        let icon = this.props.imageSource != '' ? (isActive ? this.props.imageSource[0] : this.props.imageSource[1]) : (isActive ? require('../../assets/icon_collapse_arrow_up.png') : require('../../assets/icon_collapse_arrow_down.png'));

        let style=this.props.imgPos=="right"?true:false;
        let styleHeader=style?styles.headerRow:styles.headerCol;
        let imgComponent,statusComponent,subTitleComponent,subTitle,titleComponent,title;
        let headerPadding=this.props.isHasPadding ? styles.headerPadding : null;
        let headerMargin=this.props.isHasMargin ? styles.contentMargin : null;


        if(this.props.hasImg){
            if(this.props.imgPos == 'right'){
                imgComponent=<Image style={[styles.headerImage, this.props.imageStyle]} source={icon}/>
                statusComponent=section.status?<Label labelStyle={[styles.status,{color:section.statusColor?section.statusColor:color.collapse.status,fontSize:fontSize.collapse.statusFontSize}]} text={section.status} />:null
            }
        }

        if(section.titleComponent){
            titleComponent=section.titleComponent;
        }
        if(section.title){
            title=<Label labelStyle={style?styles.headerTitleRow:styles.titleColMain}  text={section.title} />
        }
        if(section.subTitleComponent){
            subTitleComponent=section.subTitleComponent;
        }
        if(section.subTitle){

            subTitle=<Label labelStyle={[style?styles.headerSubTitleRow:styles.headerTitleCol,styles.subTitle]} type={'percent'} color={'description'} text={section.subTitle} />
        }
        return (
            <View style={[this.spaceWhiteStyle, {paddingRight: this.props.hasImg ? 8 : 15}]}>
                <View style={[styleHeader, headerPadding, headerMargin, this.props.headStyle]}>
                    <View style={style ? styles.flexContainer : null}>
                        {title}
                        {titleComponent}
                        {subTitle}
                        {subTitleComponent}
                    </View>
                    {statusComponent}
                    {imgComponent}
                </View>
                {this.props.isShowHeaderLine ? <View style={{height: 1, backgroundColor: color.border, marginRight: this.props.hasImg ? 7 : 0}}></View> : null}
            </View>
        );
    }

    _renderContent(section,index) {
        let component,content,showErrorMsg=false;

        let style=this.props.imgPos=="right"?true:false;
        let contentBottomLine=styles.contentBottomLine;

        let contentPadding=this.props.isHasPadding?styles.contentPadding:null;
        let contentMargin=this.props.isHasMargin?styles.contentMargin:null;

        if(section.contentComponent){
            component=section.contentComponent
        }
        if(section.content){
            content=<Label labelStyle={styles.contentText} text={section.content} />
        }

        if(this.props.section[index].errorMsg){
            showErrorMsg=true;
        }

        return (
            <View style={[this.spaceWhiteStyle,{borderBottomWidth: this.props.isShowContentBottomLine ? 1:0, borderBottomColor: color.border}]}>
                <View style={[styles.content,{backgroundColor:this.props.contentColor},{borderBottomWidth:this.props.isShowContentLine?1:0},contentPadding,contentMargin,this.props.contentStyle]}>
                    {
                        showErrorMsg?
                            <View style={styles.errorMsContainer}> 
                                <Label labelStyle={styles.errorMsg} text={section.errorMsg} />
                                <TouchableOpacity onPress={section.handleFunc}>
                                    <Label labelStyle={styles.handle} text={section.handleTips} />
                                </TouchableOpacity>
                            </View>
                            :
                            <View>
                                {component}
                                {content}
                            </View>
                    }
                </View>
            </View>
        );
    }

    _toggle(index){
        if(this.props.clickFunc){
            this.props.clickFunc(index)
        }
    }

    render() {
        let marginTop=this.props.marginTop;
        let contentColor=this.props.contentColor;

        return (
            <View>
                <Accordion
                    sections={this.props.section}
                    renderHeader={this._renderHeader}
                    renderContent={this._renderContent}
                    renderImg={this._renderImg}
                    underlayColor="transparent"
                    onChange={this._toggle}
                    initiallyActiveSection={this.props.initiallyActiveSection}
                    hasAccording={this.props.hasAccording}
                    marginTop={marginTop}
                    contentColor={contentColor}
                    disabled={this.props.disabled}
                />
            </View>
        );
    }
}

Collapse.propTypes={
    hasImg:PropTypes.bool,
    isShowContentLine:PropTypes.bool,
    isShowHeaderLine:PropTypes.bool,
    isHasMargin:PropTypes.bool,
    isHasPadding:PropTypes.bool,
    hasAccording:PropTypes.bool,
    imgPos:PropTypes.string,
    marginTop:PropTypes.number,
    contentColor:PropTypes.string,
    sections:PropTypes.array,
    initiallyActiveSection:PropTypes.number,
    clickFunc:PropTypes.func,
    hasSpace:PropTypes.bool,
    contentStyle:PropTypes.object,
    disabled:PropTypes.bool,
    // 下上箭头的图片路径
    imageSource: PropTypes.any,
    // 图片的样式
    imageStyle: PropTypes.any,
    // 标题的样式
    headStyle: PropTypes.any,
    // 展开收起的文字
    text: PropTypes.any,
    // 展开收起的文字样式
    textStyle: PropTypes.any,
    //是否显示底部边框
    isShowContentBottomLine: PropTypes.bool
};

Collapse.defaultProps = {
    hasImg: true,
    imgPos: 'right',
    initiallyActiveSection: 0,
    marginTop: 0,
    isShowContentLine: true,
    isShowHeaderLine: true,
    isHasMargin: false,
    isHasPadding: true,
    hasAccording: true,
    contentColor: '#fff',
    hasSpace: false,
    contentStyle: {},
    disabled: false,
    // 下上箭头的图片路径
    imageSource: '',
    // 图片的样式
    imageStyle: {},
    // 标题的样式
    headStyle: {},
    // 展开收起的文字
    text: [],
    // 展开收起的文字样式
    textStyle: {},
    //是否显示底部边框,默认展示
    isShowContentBottomLine : true
};

const styles = StyleSheet.create({
    headerRow:{
        flexDirection: 'row',
        backgroundColor:'#fff',
        justifyContent:'center',
        alignItems:'flex-start'
    },
    headerTitleRow:{
        color :color.collapse.title,
        paddingTop:12,
        paddingBottom:11,
        fontSize:fontSize.collapse.titleFontSize
    },
    headerSubTitleRow:{
        paddingTop:5
    },
    headerCol:{
        flexDirection: 'column',
        backgroundColor:color.white,
        justifyContent:'center',
        borderColor:color.collapse.boder,
        paddingTop: 12,
        paddingBottom: 11,
    },
    headerTitleCol:{
        paddingTop: 5
    },
    headerImage : {
        width : 28,
        height : 28,
        marginTop: 8
    },
    headerColImg:{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: 10,
        paddingBottom: 10,
        borderBottomWidth:1,
        borderColor: color.border,
        backgroundColor: color.white
    },
    content:{
        paddingTop:12,
        paddingBottom:11,
        justifyContent:'center',
        borderColor:color.border,
        borderBottomWidth: 1,
    },
    contentText:{
        color:color.collapse.content,
        fontSize:fontSize.collapse.contentFontSize,
    },
    status:{
        marginTop: 12
    },
    subTitle:{
    },
    titleColMain:{
        color :color.collapse.title,
        fontSize:fontSize.collapse.titleFontSize,
    },
    flexContainer:{
        flex: 1,
        paddingTop: 12,
        paddingBottom: 12
    },
    headerPadding:{
        paddingLeft:15,
        paddingRight:8,
        borderWidth: 1
    },
    contentPadding:{
        paddingLeft:15,
        paddingRight:15,
    },
    contentMargin:{
        marginLeft:8,
        marginRight:8
    },
    errorMsContainer:{
        paddingTop:29,
        paddingBottom:25
    },
    errorMsg:{
        textAlign:'center',
        height:20,
        lineHeight:20,
        color: color.collapse.error,
        fontSize: fontSize.collapse.errorFontSize 
    },
    handle:{
        textAlign:'center',
        height:20,
        lineHeight:20,
        marginTop: 5,
        color: color.collapse.handleTips,
        fontSize: fontSize.collapse.handleTipsFontSize
    },
    space:{
        paddingLeft:15,
        paddingRight:15,
        backgroundColor:color.white
    }
});
